import React, {Component} from 'react';
import './style.css';

class TabControl extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentIndex: 0
        }
    }

    itemClick(index) {
        this.setState({
            currentIndex: index
        })
        this.props.tabClict(index)
    }

    render() {
        const {titles} = this.props;
        const {currentIndex} = this.state;
        return (
            <div className="tab-control">
                {
                    titles.map((title, index) => {
                        return <div
                            className={`item ${currentIndex === index ? 'active' : ''}`}
                            key={index}
                            onClick={e => this.itemClick(index)}
                        >
                            <span className="text"> {title}</span>
                        </div>
                    })
                }
            </div>
        );
    }
}

export default TabControl;